<template>
    <div class="map-panel">
      <div id="mapViewDiv" class="map-container"></div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { onMounted } from 'vue'
  import Map from '@arcgis/core/Map'
  import MapView from '@arcgis/core/views/MapView'
  import { useMapStore } from '../stores/map'
  
  const mapStore = useMapStore()
  
  onMounted(() => {
    const map = new Map({
      basemap: 'topo-vector'
    })
    const view = new MapView({
      container: 'mapViewDiv',
      map: map,
      zoom: 10,
      center: [116.3, 39.9] // 默认北京
    })
    mapStore.setMapView(view)
  })
  </script>
  
  <style scoped>
  .map-panel {
    height: 100%;
  }
  .map-container {
    height: 100%;
    width: 100%;
  }
  </style>